<template>
  <div ref="net_sec" class="net-sec" style="width: 100%;
  height: 90%;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
      option : {
        color: ["#FACC29", "#00E1E4", "#FF3535", "#365EFF"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            align:'left'
          },
          axisPointer: {
            type: "none",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter(params) {
          let tipString=params[0].axisValue+'<br/>'
         
          if(params.length>0){
            params.forEach(i=>{
            tipString+=`<span style='width:120px;display:inline-block;'>${i.marker}${i.seriesName}</span>&nbsp;&nbsp;&nbsp;<span style='text-align:right'>${i.value}</span><br/>`
          })
          }
          return tipString
        },
        },
        legend: {
          bottom: "2%",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
          },
        },

        grid: {
          left: "3%",
          right: "2%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
          icon:'circle'
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true, color: "rgba(255,255,255,0.5)",

            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1a1f6d",
                width: 1,
              },
            },
            axisLabel: {
              show: true, color: "rgba(255,255,255,0.5)",

            },
          },
        ],

        series: [
          {
            symbol: "circle",
            name: "",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#FACC29",
            },
            areaStyle: {
              opacity: 0.2,
            },
            showSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: [],
          },
        ],
      }
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        // 初始化对象
        this.chartInstance = echarts.init(this.$refs.net_sec, this.theme);
        this.chartInstance.setOption(this.option, true);
      })
    },
    getData(params) {
      this.$nextTick(() => {
        this.option.xAxis[0].data = params.xAxisData;
        this.option.series = [];
        if (params.vals.length > 0) {
          params.vals.forEach(i => {
            this.option.series.push(
                {
                  symbol: "circle",
                  name: i.name,
                  type: "line",
                  smooth: true,
                  areaStyle: {
                    opacity: 0.2,
                  },
                  showSymbol: false,
                  emphasis: {
                    focus: "series",
                  },
                  data: i.value,
                },
            )
          })

        }

        this.chartInstance.setOption(this.option, true);
      })
    },
    updateChart() {},
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
      destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
  height: 90%;
}
</style>
